<template>
  <view class="bg-gray-100 min-h-screen">
    <view class="p-4">
      <view class="flex items-center justify-between">
        <view class="text-lg font-bold">TEST</view>
        <view class="flex items-center space-x-4">
          <view class="text-sm">胡帅</view>
          <view class="text-xs">1币</view>
        </view>
      </view>
    </view>

    <view class="p-4">
      <view class="bg-white p-4 rounded-lg shadow-md">
        <view class="text-center font-bold text-lg">6周年 - 建设我的娃娃机王国</view>
        <view class="text-center text-sm">7月1日10:00 - 7月7日23:59</view>
      </view>
    </view>

    <view class="p-4">
      <view class="bg-white p-4 rounded-lg shadow-md">
        <view class="grid grid-cols-2 gap-4">
          <view v-for="item in items" :key="item.id" class="bg-gray-200 p-2 rounded-lg">
            <img :src="item.image" alt="item.name" class="w-full h-32 object-cover rounded-md">
            <view class="text-center mt-2">{{ item.name }}</view>
            <view class="text-center text-sm">{{ item.price }}币</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '测试新人专享', price: 25, image: 'https://example.com/item1.jpg' },
        { id: 2, name: '凯蒂猫', price: 25, image: 'https://example.com/item2.jpg' },
        // 继续添加其他项目
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
/* 这里可以添加一些自定义的样式 */
</style>
